<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>后台管理系统</title>
    <link rel="stylesheet" type="text/css" href="./css/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="./css/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="./css/index.css">
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/jquery.easyui.min.js"></script>
</head>

<body>

    <div class="easyui-layout" data-options="fit:true">
        <div data-options="region:'north'" style="height:57px;text-indent: 1rem">
                <h1 style="margin:10px 0">后台管理系统</h1>
        </div>
        <div data-options="region:'south',split:true" style="height:50px;">
            <center style="line-height:45px">copyright 2019</center>
        </div>
        <div data-options="region:'west',split:true" title="系统管理" style="width:200px;" id="lista">
            <ul id="menus">
                <li><a link="./views/user.html" href="javascript:void(0)" class="custom">用户管理</a></li>
                <li><a link="./views/cate.html" href="javascript:void(0)" class="cate">分类管理</a></li>
                <li><a link="./views/news.html" href="javascript:void(0)" class="news">新闻管理</a></li>
                <li><a link="./views/product.html" href="javascript:void(0)" class="product">产品管理</a></li>
                <li><a link="./views/order.html" href="javascript:void(0)" class="order">订单管理</a></li>

            </ul>
        </div>
        <div data-options="region:'center',title:'管理界面',iconCls:'icon-ok'">

            <div id="tt" class="easyui-tabs" data-options="fit:true">



            </div>
        </div>

</body>

</html>

<script>
    var flag = true;
    $("#menus li a").click(function() {
        var link = $(this).attr('link');
        var title = $(this).text();
        if (flag) {
            addPanel(title, link);
        };
        $("#menus li a").click(function() {
            var link = $(this).attr('link');
            var title = $(this).text();
            if ($('#tt').tabs('exists', title)) {
                $('#tt').tabs('select', title); //选中并刷新
            } else {
                addPanel(title, link);
            }
        })
    })

    function addPanel(title, link) {
        flag = false;
        $('#tt').tabs('add', {
            title: title,
            content: `<iframe src="${link}" frameborder="0" style="width:100%;height:100%"></iframe>`,
            closable: true,
        });
    }



    $(document).ready(function() {
        var link = './views/main.html'
        $('#tt').tabs('add', {
            title: '首页',
            content: `<iframe src="${link}" frameborder="0" style="width:100%;height:100%"></iframe>`,
            closable: false,
        });

    })


    var globalURL = 'http://10.31.162.48:3000/';
</script>